<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<!doctype html>
<html lang="en-us" dir="ltr">
  <head>
  <meta charset="utf-8">
    <title>测试主页</title>
    <link type="text/css" rel="stylesheet" href="${ctxPath}/static/css/tips/tips-add.css" />
    <link type="text/css" rel="stylesheet" href="${ctxPath}/static/css/ui/pepper-grinder/jquery-ui-1.8.19.custom.css" />
    <link type="text/css" rel="stylesheet" href="${ctxPath}/static/css/skin/blue.monday/jplayer.blue.monday.css" />
    <!--[if lte ie 7]>
      <style type="text/css" media="screen">
        /* Move these to your IE6/7 specific stylesheet if possible */
        .uniForm, .uniForm fieldset, .uniForm .ctrlHolder, .uniForm .formHint, .uniForm .buttonHolder, .uniForm .ctrlHolder ul{ zoom:1; }
      </style>
    <![endif]-->
    <script type="text/javascript" src="${ctxPath}/static/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="${ctxPath}/static/js/jquery.jplayer.min.js"></script>
	<script type="text/javascript" src="${ctxPath}/static/js/jquery.form.js"></script>
	<script type="text/javascript" src="${ctxPath}/static/js/jquery-ui-1.8.19.custom.min.js"></script>
	<script type="text/javascript">
    //<![CDATA[
$(document).ready(function(){
	$("#jquery_jplayer_1").jPlayer({
		ready: function (event) {
			$(this).jPlayer("setMedia", {
				mp3:"http://127.0.0.1:8085/mynet/audio/222.mp3"//这个就是mp3文件在网络或者你项目的路径
			}).jPlayer("play");
		},
		swfPath: "${ctxPath}/static/js",
		supplied: "mp3",
		wmode: "window"
	});
});
//]]>
</script>
	<style type="text/css">
		.uniForm #div_wait_ajax_form {
		    background: none repeat scroll 0 0 #C8FFBF;
		    border: 1px solid #A2EF95;
		    border-radius: 4px 4px 4px 4px;
		    margin: 0 0 1.5em;
		    padding: 1.5em;
		    text-align: center;
		}
	</style>
	
  </head>

  <body>

		<div id="jquery_jplayer_1" class="jp-jplayer"></div>

		<div id="jp_container_1" class="jp-audio">
			<div class="jp-type-single">
				<div class="jp-gui jp-interface">
					<ul class="jp-controls">
						<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
						<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
						<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
						<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
						<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
						<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
					</ul>
					<div class="jp-progress">
						<div class="jp-seek-bar">
							<div class="jp-play-bar"></div>
						</div>
					</div>
					<div class="jp-volume-bar">
						<div class="jp-volume-bar-value"></div>
					</div>
					<div class="jp-time-holder">
						<div class="jp-current-time"></div>
						<div class="jp-duration"></div>

						<ul class="jp-toggles">
							<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
							<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
						</ul>
					</div>
				</div>
				<div class="jp-title">
					<ul>
						<li>Cro Magnon Man</li>
					</ul>
				</div>
				<div class="jp-no-solution">
					<span>Update Required</span>
					To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
				</div>
			</div>
		</div>
    <form id="ajax_form" action="#" class="uniForm">
     <div class="header">
        <h2>Default Style</h2>
        <p>Author:  <a href="javascript:void(0);" class="cta">see more styles →</a></p>
      </div>

		<div id="div_wait_ajax_form" title="正在提交数据,请稍等……" style="display: none">
			<img src="${ctxPath}/static/images/busy.gif" />
			<p>正在提交数据,请稍等……</p>
		</div>		

		<div id="errorMsg" style="display: none">
        	<h3>Ooops! Your error message title</h3>
			<ol>
            	<li></li>
            	<li></li>
			</ol>
		</div>
      
		<div id="okMsg" style="display: none">
			<p>1213
        	</p>
		</div>

      <fieldset>
        <h3>Client side form demonstration</h3>
        
        <div class="ctrlHolder">
          <label for=""><em>*</em> 参数1</label>
          <input name="param1" id="param1" data-default-value="Placeholder text" size="35" maxlength="50" type="text" class="textInput required"/>
          <p class="formHint">Required element</p>
        </div>
        
        <div class="ctrlHolder">
          <label for=""><em>*</em> 参数2</label>
          <input name="param2" id="param2" data-default-value="Placeholder text" size="35" maxlength="50" type="text" class="textInput required"/>
          <p class="formHint">Required element</p>
        </div>

        <div class="ctrlHolder">
          <label for=""><em>*</em> 参数3</label>
          <textarea name="param3" id="param3" rows="25" cols="25"></textarea>
          <p class="formHint">This is a form hint.</p>
        </div>

      </fieldset>
      
      <div class="buttonHolder">
        <button type="button" id="addBtn" class="primaryAction">Submit</button>
      </div>

    </form>

    <div class="browse">
      <h2>Change style</h2>
      <ul>
        <li><a href="#" rel="#">Default</a> <a href="javascript:void(0);" class="download" title="download style"><img src="http://sprawsm.com/uni-form/assets/download.png" alt="download" width="9" height="12" /></a></li>
        <li><a href="#" rel="#">Blue</a> <a href="javascript:void(0);" class="download" title="download style"><img src="http://sprawsm.com/uni-form/assets/download.png" alt="download" width="9" height="12" /></a></li>
        <li><a href="#" rel="#">Dark</a> <a href="javascript:void(0);" class="download" title="download style"><img src="http://sprawsm.com/uni-form/assets/download.png" alt="download" width="9" height="12" /></a></li>
      </ul>
    </div>    

<script type="text/javascript">
	
	$(document).ready(function(){	
		
		$("#div_wait_ajax_form").hide();
		$("#errorMsg").hide();
		$("#okMsg").hide();		
		
		$("#addBtn").click(function(){
			//timestamp 防止缓存
		    var url = "${ctxPath}/audio/add.do?timestamp=" + new Date().getTime();
		    var options = { 
		        beforeSubmit:  showRequest,  
		        success:  showResponseJson,  
		        error: showResponseError,
		        url:       url ,         
		        dataType:  'json',
		        type:      'post'
		    }; 
			$("#ajax_form").ajaxSubmit(options); 
		});
		
	});
	
//调用前
function showRequest(formData, jqForm, options) {
	//var bValid = validateAjax();//验证
	var bValid = true;//验证
	if ( bValid ) {
		$("#div_wait_ajax_form").show();
	}
	//return false;
	return bValid;
} 

//调用成功
function showResponseJson(responseText, statusText, xhr, $form)  {
	var resultFlag = responseText.resultFlag;
	var resultInfo = responseText.resultInfo;	
	$("#div_wait_ajax_form").hide();
	if(true == resultFlag || "true" == resultFlag){
		var audioObj = responseText.resultVo;
		
		$("#okMsg").show();	
		//测试是否返回结果
		alert(resultInfo);
		alert(audioObj.audio_createtime);
		alert(audioObj.audio_succ);
		alert(audioObj.audio_url);
		
		//成功生成音频
	}else{
		//生成音频失败
	 	$("#errorMsg").show();
		
	 	alert(resultInfo);
	}
}
//调用失败
function showResponseError(responseText, statusText, xhr, $form)  {
	$("#div_wait_ajax_form").hide();
	var rels = "提交数据出现异常!!!";       
	$("#errorMsg").show();
}
	
</script>
  </body>
</html>